<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .query {
            border: 1px solid #ccc;
            margin-bottom: 5px;
            height: 30px;
            padding-top: 4px;
            padding-left: 4px;
            text-align: center;
        }

        #userTable table {
            width: 100%;
        }

        #userTable table,
        #userTable td,
        #userTable th {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        #userTable td {
            text-align: center;
        }

        #userTable tbody tr:hover {
            background-color: #f7fd82;
            cursor: pointer;
        }

        .gbtn_curd {
            float: left;
        }

        .gbtn_page {
            float: right;
        }

        #btn_query {
            margin-left: 10px;
        }
    </style>
    <script>
        function deleteTr(){
            let tdChecks = document.getElementsByName("tdCheck");
            let params = "";
            [...tdChecks].filter(item => item.checked == true).forEach(item => {
                if (params == "") {
                    params += item.value;
                } else {
                    params += "," + item.value;
                }
            })
            if (params!="") {
                let flag = confirm("确定要删除所选内容吗？");
                if (flag) {
                    let newArrays = params.split(",");
                    newArrays.forEach(item => {
                        let index = document.querySelector(`[date-row-id='${item}']`).rowIndex;
                        document.getElementById("myTbody").deleteRow(index - 1);
                    })
                }
            } else {
                alert("请选择数据!");
            }
        }

        function insertUser(){
            let rowData=[];
            rowData[0] = document.getElementById("insertUser_userName").value;
            rowData[1] = document.getElementById("insertUser_password").value;
            rowData[2] = true==document.getElementById("insertUser_sex_man").checked?'男':'女';
            rowData[3] = document.getElementById("insertUser_email").value;
            //插入数据
            let tbody = document.getElementById("myTbody");;
            let row = tbody.insertRow(tbody.rows.length);
            console.log(tbody.rows.length);
            row.setAttribute("date-row-id", tbody.rows.length);
            console.log(row);
            let cell0 = row.insertCell(0);
            let input = document.createElement("input");
            input.type="checkbox";
            input.name="tdCheck";
            input.value=tbody.rows.length;
            cell0.appendChild(input);
            let count = 1;
            rowData.forEach(item=>{
                let cell = row.insertCell(count)
                cell.innerHTML=item;
                count++;
            });
            document.getElementById("insertUser").hidden = true;
            document.getElementById("userTable").hidden=false; 
        }

        function init() {
            //新增
            document.getElementById("insertUser_btn").addEventListener("click", insertUser, false);
            //删除
            document.getElementById("delete_btn").addEventListener("click",deleteTr,false);
            //点击新增，显示新增界面，隐藏主界面
            document.getElementById("insert_btn").addEventListener("click",()=>{
                document.getElementById("insertUser").hidden=false;
                document.getElementById("userTable").hidden = true;
            },false);
            //点击返回，显示主界面，隐藏新增界面
            document.getElementById("insertUser_btnReturn").addEventListener("click", () => {
                document.getElementById("insertUser").hidden = true;
                document.getElementById("userTable").hidden = false;
            }, false);
            //复选框
            document.getElementById("checkAll").addEventListener("click",()=>{
                let node = document.getElementById("checkAll").checked;
                let nodes = document.getElementsByName("tdCheck");
                Array.from(nodes).forEach(item=>{
                    item.checked=node;
                })
            },false);
            
            document.querySelectorAll("#userTable tbody")[0].addEventListener("click",(event)=>{
                if(event.target.nodeName!='INPUT'){
                    let node = event.target.parentNode.firstElementChild.firstElementChild;
                    console.log(event.target.parentNode.firstElementChild.firstElementChild);
                    if(node.checked==true){
                        node.checked=false;
                    }else{
                        node.checked=true;
                    }
                }
            },false);




            document.getElementById("myTbody").addEventListener("dblclick", (event) => {
                let currentNode = event.target;
                let input = document.createElement("input");
                input.type = "text";
                input.value = currentNode.innerHTML;
                input.addEventListener("blur", (item) => {
                    let pn = item.target.parentNode;
                    pn.innerHTML = item.target.value;
                }, false);
                currentNode.innerHTML = "";
                currentNode.appendChild(input);
                input.focus();
            }, false);
        }

        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <section id="insertUser" hidden>
        <table class="noBorderTable">
            <tbody>
                <tr>
                    <td>
                        <label for="userName">用户名：</label>
                    </td>
                    <td>
                        <input type="text" name="userName" id="insertUser_userName" pattern="/^[a-zA-Z0-9]+$/" title="请使用英文和数字">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="userName">密码：</label>
                    </td>
                    <td>
                        <input type="password" name="password" id="insertUser_password">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="userName">性别：</label>
                    </td>
                    <td>
                        <input type="radio" name="sex" id="insertUser_sex_man" value="1" checked>男&nbsp;
                        <input type="radio" name="sex" id="insertUser_sex-woman" value="2">女&nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="userName">email：</label>
                    </td>
                    <td>
                        <input type="email" name="email" id="insertUser_email">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button id="insertUser_btnReturn">返回</button>
                        <button id="insertUser_btn">提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="userTable">
        <nav class="query">
            <input type="search" name="keyword">
            <button id="btn_query">查询</button>
        </nav>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="checkAll">
                    </th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>性别</th>
                    <th>email</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="5">
                        <nav class="gbtn_curd">
                            <button id="insert_btn">新增</button>
                            <button>修改</button>
                            <button id="delete_btn">删除</button>
                        </nav>
                        <nav class="gbtn_page">
                            首页&nbsp;上一页&nbsp;
                            <select></select>&nbsp; 下一页&nbsp;尾页
                        </nav>
                    </td>
                </tr>
            </tfoot>
            <tbody id="myTbody">
                <tr date-row-id="1">
                    <td>
                        <input type="checkbox" value="1" name="tdCheck">
                    </td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>男</td>
                    <td>admin@qq.com</td>
                </tr>
                <tr date-row-id="2">
                    <td>
                        <input type="checkbox" value="2" name="tdCheck">
                    </td>
                    <td>test</td>
                    <td>test</td>
                    <td>女</td>
                    <td>test@qq.com</td>
                </tr>
                <tr date-row-id="3">
                    <td>
                        <input type="checkbox" value="3" name="tdCheck">
                    </td>
                    <td>test01</td>
                    <td>test01</td>
                    <td>女</td>
                    <td>test01@qq.com</td>
                </tr>
                <tr date-row-id="4">
                    <td>
                        <input type="checkbox" value="4" name="tdCheck">
                    </td>
                    <td>manager</td>
                    <td>manager</td>
                    <td>男</td>
                    <td>manager@qq.com</td>
                </tr>
            </tbody>
        </table>
    </section>
</body>

</html>